<template>
  <div class="all">
    <div class="top">
      <header>
        <div class="div" @click="back">
          <img src="../../../assets/返回.png" alt="">
          <span class="solid">返回</span>
        </div>
        <div class="div">
          <ul class="tabUl">
            <li :class="tabIndex == 0 ? 'selectTab' : ''"
                @click="clickTabBar(0)"
            >表</li>
            <li :class="tabIndex == 1 ? 'selectTab' : ''"
                @click="clickTabBar(1)"
            >曲线</li>
            <li :class="tabIndex == 2 ? 'selectTab' : ''"
                @click="clickTabBar(2)"
            >统计</li>
          </ul>
        </div>
        <div class="div">
         <span></span>
        </div>
      </header>
      <div v-show="tabIndex == 0 || tabIndex == 1" class="title" @click="timeShow = true">
        {{sTime}}
        至
        {{eTime}}
        <img style="width: 13px;height: 7px;margin-left: 5px" src="../../../assets/sortBottom.png" alt="">
      </div>
    </div>
    <div v-if="tabIndex == 0">
      <div class="tableTitle biaoTableTitle">
        <span></span>
        <span>血糖记录表</span>
        <span @click="cankaoShow = true" style="display: flex;align-items: center">
          <img v-if="tabIndex == 0"  style="width: 15px;height: 15px;margin-right: 5px" src="../../../assets/帮助小@2x.png" alt="">
          <img v-else-if="tabIndex == 1"  style="width: 15px;height: 15px;margin-right: 5px" src="../../../assets/帮助绿.png" alt="">
          参考值
        </span>
      </div>
      <table v-if="biaoGeList.length > 0" border="1" cellspacing="0" cellpadding="0">
        <thead>
        <tr>
          <th>日期</th>
          <th>测量时状态</th>
          <th>血糖值（mmol/L）</th>
        </tr>
        </thead>
        <tbody>
        <tr @click="runUpdate(item)"  v-for="(item, index) in biaoGeList" :key="index">
          <td >{{item.date}}</td>
          <td>{{
              item.text == 0 ? '空腹' :
                item.text == 1 ? '餐后1小时' :
                  item.text == 2 ? '餐后2小时' :
                    item.text == 3 ? '餐后3小时' : ''
            }}</td>
          <td :style="{color: getColor(item.text, item.context)}">{{item.context}}</td>
        </tr>
        </tbody>
      </table>
      <van-empty
        v-else
        style="width: 100%;height: 60%"
        class="custom-image"
        :image="require('../../../assets/空两本书.png')"
        description="暂无血糖记录"
      />
    </div>
    <div v-show="tabIndex == 1" >
      <div class="tableTitle">
        <span></span>
        <span>空腹</span>
        <span @click="cankaoShow = true" style="display: flex;align-items: center">
            <img  style="width: 15px;height: 15px;margin-right: 5px" src="../../../assets/帮助绿.png" alt="">
            参考值
          </span>
      </div>
      <div class="main"  ref="main1"></div>
      <div class="tableTitle">
        <span></span>
        <span>餐后1小时</span>
        <span @click="cankaoShow = true" style="display: flex;align-items: center">
            <img  style="width: 15px;height: 15px;margin-right: 5px" src="../../../assets/帮助绿.png" alt="">
            参考值
          </span>
      </div>
      <div class="main" ref="main2"></div>
      <div class="tableTitle">
        <span></span>
        <span>餐后2小时</span>
        <span @click="cankaoShow = true" style="display: flex;align-items: center">
            <img  style="width: 15px;height: 15px;margin-right: 5px" src="../../../assets/帮助绿.png" alt="">
            参考值
          </span>
      </div>
      <div class="main" ref="main3"></div>
      <div class="tableTitle">
        <span></span>
        <span>餐后3小时</span>
        <span @click="cankaoShow = true" style="display: flex;align-items: center">
            <img  style="width: 15px;height: 15px;margin-right: 5px" src="../../../assets/帮助绿.png" alt="">
            参考值
          </span>
      </div>
      <div class="main" ref="main4"></div>
    </div>
    <div v-show="tabIndex == 2">
      <div class="label" >
        <span><a class="hengGang"></a>最近一周血糖</span>
        <span>{{ startTime }}至{{ endTime }}</span>
      </div>
      <p class="often" style="height: 44px;background: #FFFFFF;padding: 0 10px;box-sizing: border-box">
        平均血糖： <a class="solid" style="font-weight: bold">{{mathNum(weekList.avg)}}</a> mmol/L</p>
      <div class="often tongjiDiv">
        <van-circle v-model="currentRate" :rate="100" :speed="100"  >
          <template #default>
            <div style="width: 100%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;">
              <p style="font-size: 20px;color: #1da4f2">{{weekList.count}}</p>
              <p>总测试次数</p>
            </div>

          </template>
        </van-circle>
        <div class="divList">
          <p class="zhengchang" v-if="weekList.zhengchang">正常：{{weekList.zhengchang.zhengchang}}次  {{weekList.zhengchang.baifenbi}}</p>
          <p class="piangao" v-if="weekList.piangao">偏高：{{weekList.piangao.piangao}}次 {{weekList.piangao.baifenbi}}</p>
          <p class="piandi" v-if="weekList.piandi">偏低：{{weekList.piandi.piandi}}次 {{weekList.piandi.baifenbi}}</p>
        </div>
      </div>
      <div class="often tongjiDiv">
        <div ref="weekMax" style="width: 40vw;height: 300px;"></div>
        <div ref="weekAvg" style="width: 60vw;height: 300px;"></div>
      </div>

      <div class="label" >
        <span><a class="hengGang"></a>最近一个月血糖</span>
        <span>{{ startMonth }}至{{ endMonth }}</span>
      </div>
      <p class="often" style="height: 44px;background: #FFFFFF;padding: 0 10px;box-sizing: border-box">
        平均血糖： <a class="solid" style="font-weight: bold">{{mathNum(monthList.avg)}}</a> mmol/L</p>
      <div class="often tongjiDiv" v-if="monthList">
        <van-circle v-model="currentRate" :rate="100" :speed="100"  >
          <template #default>
            <div style="width: 100%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;">
              <p style="font-size: 20px;color: #1da4f2">{{monthList.count}}</p>
              <p>总测试次数</p>
            </div>

          </template>
        </van-circle>
        <div class="divList">
          <p class="zhengchang" v-if="monthList.zhengchang">正常：{{monthList.zhengchang.zhengchang}}次  {{monthList.zhengchang.baifenbi}}</p>
          <p class="piangao" v-if="monthList.piangao">偏高：{{monthList.piangao.piangao}}次 {{monthList.piangao.baifenbi}}</p>
          <p class="piandi" v-if="monthList.piandi">偏低：{{monthList.piandi.piandi}}次 {{monthList.piandi.baifenbi}}</p>
        </div>
      </div>
      <div class="often tongjiDiv">
        <div ref="monthMax" style="width: 40vw;height: 300px;"></div>
        <div ref="monthAvg" style="width: 60vw;height: 300px;"></div>
      </div>
    </div>
    <van-calendar
      color="#1da4f2"
      :style="{bottom: '50px'}" v-model="timeShow"
      type="range"
      :min-date="minDate" :max-date="maxDate"
      @confirm="timeOnConfirm"
    />
    <van-dialog v-model="cankaoShow"
                width="80%"
                :style="{maxHeight: '70%', overflow: 'auto'}"
                confirm-button-color="#1da4f2"
                confirmButtonText="知道了"
                :lock-scroll="false"
    >
      <template #default>
        <div class="popDiv">
          <div style="display: flex;
          justify-content: center;
          height: 44px;
          align-items: center;
          position: sticky;
          top: 0;
          background: #FFFFFF;
          font-size: 15px;">血糖参考值</div>
          <div style="width: 95%;margin: 0 auto">
            <img style="width: 100%;height: 310px;" src="../../../assets/血糖参考值.png" alt="">
            <p>
              注: 1.空腹指早晨6~8点，且八小时前未进食除水以外的其他事物。
            </p>
            <p>
              2.餐后时间，一般指从进食第一口时开始计时(即从开始吃饭时进行计时)。
            </p>
            <p>
              3.以上数据仅供参考。
            </p>
          </div>
        </div>
      </template>
    </van-dialog>
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
  name: 'XueTangHistory',
  data () {
    return {
      tabIndex: 0,
      userid: this.$route.query.userid,
      sTime: this.Common.formatDate(new Date().setDate((new Date().getDate() - 7)), 'yyyy-mm-dd'),
      eTime: this.Common.formatDate(new Date(), 'yyyy-mm-dd'),
      startTime: this.Common.formatDate(new Date().setDate((new Date().getDate() - 7)), 'yyyy-mm-dd'),
      endTime: this.Common.formatDate(new Date(), 'yyyy-mm-dd'),
      startMonth: this.Common.formatDate(new Date().setDate((new Date().getDate() - 30)), 'yyyy-mm-dd'),
      endMonth: this.Common.formatDate(new Date(), 'yyyy-mm-dd'),
      minDate: new Date(2010, 0, 1),
      maxDate: new Date(),
      timeShow: false,
      listArr: [],
      biaoGeList: [],
      cankaoShow: false,
      weekList: [],
      monthList: [],
      currentRate: 100,
      weekAvg: [],
      weekMax: [],
      monthAvg: [],
      monthMax: []
    }
  },
  computed: {
    getColor () {
      return function (id, content) {
        let color = '#333'
        if (id == 0) {
          if (content > 8.3 || content < 3.9) {
            color = '#E3170D'
          }
        } else if (id == 1) {
          if (content > 18.1 || content < 6.7) {
            color = '#E3170D'
          }
        } else if (id == 2) {
          if (content > 14.5 || content < 5.0) {
            color = '#E3170D'
          }
        } else if (id == 3) {
          if (content > 11.2 || content < 4.4) {
            color = '#E3170D'
          }
        }
        return color
      }
    },
    noDinner () {
      // let obj = {
      //   dateList: [],
      //   list: []
      // }
      // if (this.listArr[0]) {
      //   this.listArr[0].map((curr, index) => {
      //     obj.dateList.push(Object.keys(curr).toString())
      //     obj.list.push(Object.values(curr).toString())
      //   })
      // }
      return this.getNumber(this.listArr[0])
    },
    OneDinner () {
      // let obj = {
      //   dateList: [],
      //   list: []
      // }
      // if (this.listArr[1]) {
      //   this.listArr[1].map((curr, index) => {
      //     obj.dateList.push(Object.keys(curr).toString())
      //     obj.list.push(Object.values(curr).toString())
      //   })
      // }
      return this.getNumber(this.listArr[1])
    },
    TwoDinner () {
      // let obj = {
      //   dateList: [],
      //   list: []
      // }
      // if (this.listArr[2]) {
      //   this.listArr[2].map((curr, index) => {
      //     obj.dateList.push(Object.keys(curr).toString())
      //     obj.list.push(Object.values(curr).toString())
      //   })
      // }
      return this.getNumber(this.listArr[2])
    },
    ThreeDinner () {
      // let obj = {
      //   dateList: [],
      //   list: []
      // }
      // if (this.listArr[3]) {
      //   this.listArr[3].map((curr, index) => {
      //     obj.dateList.push(Object.keys(curr).toString())
      //     obj.list.push(Object.values(curr).toString())
      //   })
      // }
      return this.getNumber(this.listArr[3])
    }
  },
  mounted () {
    this.getBiaoGe()
    this.getTongJi()
    sessionStorage.removeItem('xueTangData')
  },
  methods: {
    getNumber (list) {
      let obj = {
        dateList: [],
        list: []
      }
      if (list) {
        list.map((curr, index) => {
          obj.dateList.push(Object.keys(curr).toString())
          obj.list.push(Object.values(curr).toString())
        })
      }
      return obj
    },
    // 点击表格行 跳转
    runUpdate (item) {
      this.$router.push({path: '/AddXueTang', query: {userid: this.userid, id: item.id}})
    },
    // 参数取小数点后
    mathNum (num) {
      return num ? Number(num).toFixed(1) : 0
    },
    weekMaxdrawLine () {
      const chart = this.$refs.weekMax
      let charts = echarts.init(chart)
      var option = {
        grid: {
          left: '1%',
          top: 50,
          right: '0',
          bottom: '1%',
          containLabel: true
        },
        title: {
          show: true, // 显示策略，默认值true,可选为：true（显示） | false（隐藏）
          text: '测量血糖最值(mmol/L)', // 主标题文本，'\n'指定换行
          x: 'center',
          textStyle: { // 主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
            fontFamily: 'Arial, Verdana, sans...',
            fontSize: 12,
            fontStyle: 'normal',
            fontWeight: 'normal'
          }
        },
        xAxis: {
          type: 'category',
          data: ['最高值', '最低值']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: this.weekMax,
          type: 'bar',
          itemStyle: {
            normal: {
              color: '#2EC49B',
              label: {
                show: true, // 开启显示
                position: 'top', // 在上方显示
                textStyle: { // 数值样式
                  // fontSize: 16
                }
              }
            }
          }
        }]
      }
      charts.setOption(option)
      // 随着屏幕大小调节图表
      window.addEventListener('resize', () => {
        charts.resize()
      })
      // setTimeout(function () {
      //   window.onresize = function () {
      //     charts.resize()
      //   }
      // }, 200)
    },
    weekAvgdrawLine () {
      const chart = this.$refs.weekAvg
      let charts = echarts.init(chart)
      let option = {
        title: {
          show: true, // 显示策略，默认值true,可选为：true（显示） | false（隐藏）
          text: '分时段平均值(mmol/L)', // 主标题文本，'\n'指定换行
          x: 'center',
          textStyle: { // 主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
            fontFamily: 'Arial, Verdana, sans...',
            fontSize: 12,
            fontStyle: 'normal',
            fontWeight: 'normal'
          }
        },
        grid: {
          left: 30,
          top: 50,
          right: '0',
          bottom: '1%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['空腹', '餐后1h', '餐后2h', '餐后3h'],
          axisLabel: {
            interval: 0, // 强制文字产生间隔
            rotate: 45, // 文字逆时针旋转45°
            textStyle: { // 文字样式
              color: 'black',
              fontFamily: 'Microsoft YaHei'
            }
          }
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: this.weekAvg,
          type: 'bar',
          itemStyle: {
            normal: {
              color: '#2EC49B',
              label: {
                show: true, // 开启显示
                position: 'top', // 在上方显示
                textStyle: { // 数值样式
                  // fontSize: 16
                }
              }
            }
          }
        }]
      }
      charts.setOption(option)
      // 随着屏幕大小调节图表
      window.addEventListener('resize', () => {
        charts.resize()
      })
    },
    monthMaxdrawLine () {
      const chart = this.$refs.monthMax
      let charts = echarts.init(chart)
      var option = {
        grid: {
          left: '1%',
          top: 50,
          right: '0',
          bottom: '1%',
          containLabel: true
        },
        title: {
          show: true, // 显示策略，默认值true,可选为：true（显示） | false（隐藏）
          text: '测量血糖最值(mmol/L)', // 主标题文本，'\n'指定换行
          x: 'center',
          textStyle: { // 主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
            fontFamily: 'Arial, Verdana, sans...',
            fontSize: 12,
            fontStyle: 'normal',
            fontWeight: 'normal'
          }
        },
        xAxis: {
          type: 'category',
          data: ['最高值', '最低值']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: this.monthMax,
          type: 'bar',
          itemStyle: {
            normal: {
              color: '#2EC49B',
              label: {
                show: true, // 开启显示
                position: 'top', // 在上方显示
                textStyle: { // 数值样式
                  // fontSize: 16
                }
              }
            }
          }
        }]
      }
      charts.setOption(option)
      // 随着屏幕大小调节图表
      window.addEventListener('resize', () => {
        charts.resize()
      })
      // setTimeout(function () {
      //   window.onresize = function () {
      //     charts.resize()
      //   }
      // }, 200)
    },
    monthAvgdrawLine () {
      const chart = this.$refs.monthAvg
      let charts = echarts.init(chart)
      let option = {
        title: {
          show: true, // 显示策略，默认值true,可选为：true（显示） | false（隐藏）
          text: '分时段平均值(mmol/L)', // 主标题文本，'\n'指定换行
          x: 'center',
          textStyle: { // 主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
            fontFamily: 'Arial, Verdana, sans...',
            fontSize: 12,
            fontStyle: 'normal',
            fontWeight: 'normal'
          }
        },
        grid: {
          left: 30,
          top: 50,
          right: '0',
          bottom: '1%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['空腹', '餐后1h', '餐后2h', '餐后3h'],
          axisLabel: {
            interval: 0, // 强制文字产生间隔
            rotate: 45, // 文字逆时针旋转45°
            textStyle: { // 文字样式
              color: 'black',
              fontFamily: 'Microsoft YaHei'
            }
          }
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: this.monthAvg,
          type: 'bar',
          itemStyle: {
            normal: {
              color: '#2EC49B',
              label: {
                show: true, // 开启显示
                position: 'top', // 在上方显示
                textStyle: { // 数值样式
                  // fontSize: 16
                }
              }
            }
          }
        }]
      }
      charts.setOption(option)
      // 随着屏幕大小调节图表
      window.addEventListener('resize', () => {
        charts.resize()
      })
    },
    // 获取统计数据
    getTongJi () {
      this.$http.healthXueTangTongJi({userid: this.userid})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.weekList = res.data.data.week
            this.monthList = res.data.data.month
            this.weekAvg = []
            this.weekAvg.push(this.mathNum(this.weekList[0]))
            this.weekAvg.push(this.mathNum(this.weekList[1]))
            this.weekAvg.push(this.mathNum(this.weekList[2]))
            this.weekAvg.push(this.mathNum(this.weekList[3]))

            this.weekMax = []
            this.weekMax.push(this.weekList.max)
            this.weekMax.push(this.weekList.min)

            this.monthAvg = []
            this.monthAvg.push(this.mathNum(this.monthList[0]))
            this.monthAvg.push(this.mathNum(this.monthList[1]))
            this.monthAvg.push(this.mathNum(this.monthList[2]))
            this.monthAvg.push(this.mathNum(this.monthList[3]))

            this.monthMax = []
            this.monthMax.push(this.monthList.max)
            this.monthMax.push(this.monthList.min)
          } else {
            this.$toast(res.data.msg)
          }
        })
        .catch(err => {
          console.log(err)
          this.$toast('您的网络有些拥挤，请稍后再试')
        })
    },
    // 获取表格数据
    getBiaoGe () {
      this.$http.healthXueTangByGe({
        sTime: this.sTime,
        eTime: this.eTime,
        userid: this.userid
      })
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.biaoGeList = []
            let data = res.data.data
            for (let i in data) {
              if (data[i].length > 0) {
                for (let k in data[i]) {
                  let obj = {
                    date: i
                  }
                  obj.id = data[i][k].id
                  obj.text = Object.keys(data[i][k])[0]
                  obj.context = Object.values(data[i][k])[0]
                  this.biaoGeList.push(obj)
                  k++
                }
              }
            }
            this.biaoGeList.sort((a, b) => {
              return new Date(a.date) > new Date(b.date) ? 1 : -1
            })
          } else {
            this.$toast(res.data.msg)
          }
        })
        .catch(err => {
          console.log(err)
          this.$toast('您的网络有些拥挤，请稍后再试')
        })
    },
    getData () {
      this.$http.healthXueTangByDuan({
        sTime: this.sTime,
        eTime: this.eTime,
        userid: this.userid
      })
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.listArr = res.data.data
            this.drawCharts()
          } else {
            this.$toast(res.data.msg)
          }
        })
        .catch(err => {
          console.log(err)
          this.$toast('您的网络有些拥挤，请稍后再试')
        })
    },
    drawCharts () {
      this.drawLine1()
      this.drawLine2()
      this.drawLine3()
      this.drawLine4()

      // 统计
      this.weekMaxdrawLine()
      this.weekAvgdrawLine()
      this.monthMaxdrawLine()
      this.monthAvgdrawLine()
    },
    drawLine1 () {
      const chart = this.$refs.main1
      let charts = echarts.init(chart)
      var option = {
        title: {
          text: '',
          subtext: '',
          textStyle: {
            fontSize: 13
          }
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          orient: 'vertical',
          x: 'right', // 可设定图例在左、右、居中
          y: 'top', // 可设定图例在上、下、居中
          padding: [0, 50, 0, 0], // 可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
          data: ['异常', '正常'],
          icon: 'rect'
        },
        grid: {
          left: '6%',
          right: '4%',
          bottom: '5%',
          containLabel: true,
          y2: 200
        },
        xAxis: {
          boundaryGap: true,
          type: 'category',
          data: this.noDinner.dateList,
          axisLine: { // x轴坐标轴，false为隐藏，true为显示
            'show': false
          },
          // splitLine: {
          //   show: true,
          //   lineStyle: {// y轴网格线设置
          //     color: '#1da4f2',
          //     width: 1,
          //     type: 'solid'
          //   }
          // },
          axisLabel: {
            interval: 0,
            rotate: 60
          },
          max: 8
        },
        yAxis: {
          type: 'value',
          name: 'mmol/L',
          nameTextStyle: 'end',
          min: 0,
          max: 20,
          show: true,
          position: 'left',
          axisLine: { // y轴坐标轴，false为隐藏，true为显示
            'show': false
          },
          splitLine: {
            show: true,
            lineStyle: {// y轴网格线设置
              color: '#ccc',
              width: 1,
              type: 'dotted'
            }
          }
        },
        series: [
          {
            name: '空腹',
            type: 'line',
            data: this.noDinner.list,
            symbol: 'circle', // 拐点样式
            symbolSize: 4, // 拐点大小
            lineStyle: {
              color: '#7CB140', // 设置折线的颜色
              borderColor: '#7CB140'
            },
            itemStyle: {
              normal: {
                label: {
                  show: true
                },
                color: function (params) {
                  if (params.value > 8.3) {
                    return '#E3170D'
                  } else if (params.value < 3.9) {
                    return '#E3170D'
                  } else {
                    return '#1da4f2'
                  }
                }
              }
            }
          }
        ],
        dataZoom: [{
          type: 'slider',
          show: true,
          xAxisIndex: [0],
          left: '9%',
          bottom: -5,
          start: 0,
          end: 90 // 初始化滚动条
        }]
      }
      charts.setOption(option)
      // 随着屏幕大小调节图表
      window.addEventListener('resize', () => {
        charts.resize()
      })
    },
    drawLine2 () {
      const chart = this.$refs.main2
      let charts = echarts.init(chart)
      var option = {
        title: {
          text: '',
          subtext: '',
          textStyle: {
            fontSize: 13
          }
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          orient: 'vertical',
          x: 'right', // 可设定图例在左、右、居中
          y: 'top', // 可设定图例在上、下、居中
          padding: [0, 50, 0, 0], // 可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
          data: ['异常', '正常'],
          icon: 'rect'
        },
        grid: {
          left: '6%',
          right: '4%',
          bottom: '5%',
          containLabel: true,
          y2: 200
        },
        xAxis: {
          boundaryGap: true,
          type: 'category',
          data: this.OneDinner.dateList,
          axisLine: { // x轴坐标轴，false为隐藏，true为显示
            'show': false
          },
          // splitLine: {
          //   show: true,
          //   lineStyle: {// y轴网格线设置
          //     color: '#1da4f2',
          //     width: 1,
          //     type: 'solid'
          //   }
          // },
          axisLabel: {
            interval: 0,
            rotate: 60
          },
          max: 8
        },
        yAxis: {
          type: 'value',
          name: 'mmol/L',
          nameTextStyle: 'end',
          min: 0,
          max: 20,
          show: true,
          position: 'left',
          axisLine: { // y轴坐标轴，false为隐藏，true为显示
            'show': false
          },
          splitLine: {
            show: true,
            lineStyle: {// y轴网格线设置
              color: '#ccc',
              width: 1,
              type: 'dotted'
            }
          }
        },
        series: [
          {
            name: '餐后1小时',
            type: 'line',
            data: this.OneDinner.list,
            symbol: 'circle', // 拐点样式
            symbolSize: 4, // 拐点大小
            lineStyle: {
              color: '#FF99CC', // 设置折线的颜色
              borderColor: '#FF99CC'
            },
            itemStyle: {
              normal: {
                label: {
                  show: true
                },
                color: function (params) {
                  if (params.value > 18.1) {
                    return '#E3170D'
                  } else if (params.value < 6.7) {
                    return '#E3170D'
                  } else {
                    return '#1da4f2'
                  }
                }
              }
            }
          }
        ],
        dataZoom: [{
          type: 'slider',
          show: true,
          xAxisIndex: [0],
          left: '9%',
          bottom: -5,
          start: 0,
          end: 90 // 初始化滚动条
        }]
      }
      charts.setOption(option)
      // 随着屏幕大小调节图表
      window.addEventListener('resize', () => {
        charts.resize()
      })
    },
    drawLine3 () {
      const chart = this.$refs.main3
      let charts = echarts.init(chart)
      var option = {
        title: {
          text: '',
          subtext: '',
          textStyle: {
            fontSize: 13
          }
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          orient: 'vertical',
          x: 'right', // 可设定图例在左、右、居中
          y: 'top', // 可设定图例在上、下、居中
          padding: [0, 50, 0, 0], // 可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
          data: ['异常', '正常'],
          icon: 'rect'
        },
        grid: {
          left: '6%',
          right: '4%',
          bottom: '5%',
          containLabel: true,
          y2: 200
        },
        xAxis: {
          boundaryGap: true,
          type: 'category',
          data: this.TwoDinner.dateList,
          axisLine: { // x轴坐标轴，false为隐藏，true为显示
            'show': false
          },
          // splitLine: {
          //   show: true,
          //   lineStyle: {// y轴网格线设置
          //     color: '#1da4f2',
          //     width: 1,
          //     type: 'solid'
          //   }
          // },
          axisLabel: {
            interval: 0,
            rotate: 60
          },
          max: 8
        },
        yAxis: {
          type: 'value',
          name: 'mmol/L',
          nameTextStyle: 'end',
          min: 0,
          max: 20,
          show: true,
          position: 'left',
          axisLine: { // y轴坐标轴，false为隐藏，true为显示
            'show': false
          },
          splitLine: {
            show: true,
            lineStyle: {// y轴网格线设置
              color: '#ccc',
              width: 1,
              type: 'dotted'
            }
          }
        },
        series: [
          {
            name: '餐后2小时',
            type: 'line',
            data: this.TwoDinner.list,
            symbol: 'circle', // 拐点样式
            symbolSize: 4, // 拐点大小
            lineStyle: {
              color: '#BE98E4', // 设置折线的颜色
              borderColor: '#BE98E4'
            },
            itemStyle: {
              normal: {
                label: {
                  show: true
                },
                color: function (params) {
                  if (params.value > 14.5) {
                    return '#E3170D'
                  } else if (params.value < 5.0) {
                    return '#E3170D'
                  } else {
                    return '#1da4f2'
                  }
                }
              }
            }
          }
        ],
        dataZoom: [{
          type: 'slider',
          show: true,
          xAxisIndex: [0],
          left: '9%',
          bottom: -5,
          start: 0,
          end: 90 // 初始化滚动条
        }]
      }
      charts.setOption(option)
      // 随着屏幕大小调节图表
      window.addEventListener('resize', () => {
        charts.resize()
      })
    },
    drawLine4 () {
      const chart = this.$refs.main4
      let charts = echarts.init(chart)
      var option = {
        title: {
          text: '',
          subtext: '',
          textStyle: {
            fontSize: 13
          }
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          orient: 'vertical',
          x: 'right', // 可设定图例在左、右、居中
          y: 'top', // 可设定图例在上、下、居中
          padding: [0, 50, 0, 0], // 可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
          data: ['异常', '正常'],
          icon: 'rect'
        },
        grid: {
          left: '6%',
          right: '4%',
          bottom: '5%',
          containLabel: true,
          y2: 200
        },
        xAxis: {
          boundaryGap: true,
          type: 'category',
          data: this.ThreeDinner.dateList,
          axisLine: { // x轴坐标轴，false为隐藏，true为显示
            'show': false
          },
          // splitLine: {
          //   show: true,
          //   lineStyle: {// y轴网格线设置
          //     color: '#1da4f2',
          //     width: 1,
          //     type: 'solid'
          //   }
          // },
          axisLabel: {
            interval: 0,
            rotate: 60
          },
          max: 8
        },
        yAxis: {
          type: 'value',
          name: 'mmol/L',
          nameTextStyle: 'end',
          min: 0,
          max: 20,
          show: true,
          position: 'left',
          axisLine: { // y轴坐标轴，false为隐藏，true为显示
            'show': false
          },
          splitLine: {
            show: true,
            lineStyle: {// y轴网格线设置
              color: '#ccc',
              width: 1,
              type: 'dotted'
            }
          }
        },
        series: [
          {
            name: '餐后3小时',
            type: 'line',
            data: this.ThreeDinner.list,
            symbol: 'circle', // 拐点样式
            symbolSize: 4, // 拐点大小
            lineStyle: {
              color: '#43C8DB', // 设置折线的颜色
              borderColor: '#43C8DB'
            },
            itemStyle: {
              normal: {
                label: {
                  show: true
                },
                color: function (params) {
                  if (params.value > 11.2) {
                    return '#E3170D'
                  } else if (params.value < 4.4) {
                    return '#E3170D'
                  } else {
                    return '#1da4f2'
                  }
                }
              }
            }
          }
        ],
        dataZoom: [{
          type: 'slider',
          show: true,
          xAxisIndex: [0],
          left: '9%',
          bottom: -5,
          start: 0,
          end: 90 // 初始化滚动条
        }]
      }
      charts.setOption(option)
      // 随着屏幕大小调节图表
      window.addEventListener('resize', () => {
        charts.resize()
      })
    },
    // 选择时间段
    timeOnConfirm (date) {
      const [start, end] = date
      this.timeShow = false
      this.sTime = this.Common.formatDate(start, 'yyyy-mm-dd')
      this.eTime = this.Common.formatDate(end, 'yyyy-mm-dd')
      this.getData()
      this.getBiaoGe()
    },
    // 点击头部切换
    clickTabBar (index) {
      this.tabIndex = index
      if (index == 0) {
        this.getBiaoGe()
      } else if (index == 1) {
        this.getData()
      } else if (index == 2) {
      }
    },
    // 返回
    back () {
      this.$router.history.go(-1)
    }
  },
  updated () {
    this.drawCharts()
  }
}
</script>

<style scoped>
.all{
  width: 100%;
  height: 100%;
  background: #FAF9FE;
  overflow: auto;
  font-size: 15px;
  font-family: PingFang SC;
}
.top{
  position: sticky;
  top: 0;
  z-index: 9;
  border-bottom: 1px solid #e5e5e5;
}
header{
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #E5E5E5;
  background: white;
}
.div{
  /*width: 33%;*/
  height: 100%;
  display: flex;
  align-items: center;
  font-family: "PingFang SC";
  font-size: 15px;
  font-weight: bold;
}
.div img{
  margin-right: 5px;
}
.div:nth-child(1) img{
  height: 13px;
  width: 7px;
  margin-left: 15px;
}
.div:nth-child(3) img{
  margin-right: 5px;
  width: 13px;
  height: 13px;
}
.div:nth-child(3) span{
  margin-right: 15px;
}
.div:nth-child(2){
  width: 70%;
  justify-content: center;
}
.div:nth-child(3){
  justify-content: flex-end;
}
.solid{
  color: #1DA4F2;
}
.tabUl{
  width: 90%;
  color: #1da4f2;
  display: flex;
}
.tabUl li{
  border: 1px solid #1da4f2;
  flex: 1;
  height: 29px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: -1px;
}

.tabUl li:first-child{
  border-radius: 5px 0 0 5px;
}
.tabUl li:last-child{
  border-radius: 0 5px 5px 0;
}
.selectTab{
  background: #1da4f2!important;
  color: #FFFFFF!important;
}
.label,
.title{
  height: 44px;
  background: #FFFFFF;
  display: flex;
  align-items: center;
}
.label{
  justify-content: space-between;
  padding: 0 10px;
  box-sizing: border-box;
}
.label span{
  display: flex;
  align-items: center;
}
.hengGang{
  width: 2px;
  height: 15px;
  background: #1da4f2;
  display: block;
  margin-right: 5px;
}
.title{
  justify-content: center;
}
.tableTitle{
  width: 100%;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 50px;
  background: #fff;
  justify-content: space-between;
  color: #43C8DB;
  padding: 0 10px;
  box-sizing: border-box;
  margin-top: 10px;
  font-weight: bold;
}
.biaoTableTitle{
  margin-top: 0;
  background: rgba(29, 164, 242, 0.1);
  color: #1da4f2!important;
}
.tableTitle span{
  flex: 1;
  display: flex;
  align-items: center;
}
.tableTitle span:nth-child(2) {
  justify-content: center;
}
.tableTitle span:nth-child(3) {
  justify-content: flex-end;
}
.main{
  width: 100vw;
  height: 300px;
  background: #FFFFFF;
  padding-bottom: 10px;
  box-sizing: border-box;
}
table{
  width: 100%;
  border-color: #e5e5e5;
  background: #fff;
}
table tr{
  display: flex;
}
table thead tr{
  background: #1da4f2;
  color: #FFFFFF;
}
table th,
table td{
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
table th{
  height: 40px;
}
table td{
  height: 35px;
}
/deep/ .van-dialog__footer{
  position: sticky;
  bottom: 0;
}
.popDiv{
  font-size: 12px;
}
.zhengchang{
color: #1da4f2;
}
.piangao{
color: #E3170D;
}
.piandi{
  color: #F39800;
}
.often{
  display: flex;
  align-items: center;
}
.tongjiDiv{
  justify-content: space-around;
  padding: 10px;
  box-sizing: border-box;
  background: #FFFFFF;
  border-bottom: 1px solid #E5E5E5;
}
.divList{
  padding: 10px;
  box-sizing: border-box;
}
.divList p{
  height: 27px;
}
</style>
